<template>
    <div>
        <div class="input-container">
            <input :value="formatMoney" @input="inputHandler" />
        </div>
        <div>{{ chineseMoney }}</div>
    </div>
</template>
  
<script setup>
import { useMoney } from '../../hooks'

const [chineseMoney, formatMoney, inputHandler] = useMoney();

</script>
  
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.input-container {
    color: #606266;
    line-height: 32px;
    padding: 0;
    margin: 0;
    font-weight: normal;
    word-break: break-all;
    vertical-align: baseline;
    border: 0;
    position: relative;
    display: inline-block;
    font-size: 13px;
    width: 100% !important;
    max-width: 430px !important;
}

input {
    margin: 0;
    font-weight: normal;
    word-break: break-all;
    vertical-align: baseline;
    background-color: #FFFFFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: none;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    padding-right: 30px;
    height: 32px;
    line-height: 32px;
}

input:focus {
    border: 1px solid #ff8136;
}
</style>